<template>
    <el-form-item
        class="moban-view"
        @click.native.stop="handleSelectWidget(index)"
         style="width:100%;height: 100%;"
    >
        <span class="typeName" v-if="element.type.indexOf('Echart')>-1">{{element.name+(index+1)}}</span>
        <component style="width:100%;height: 100%;" :is="element.type" :data="element" @mobanClick="mobanClick"/>
    </el-form-item>
</template>
<script>
import Template from '../pc/template'
export default {
    components: {
        ...Template
    },
    props: ['element', 'select', 'index', 'data'],
    data() {
        return {
            selectWidget: this.select,
            result: ['a', 'b']
        }
    },
    watch: {
        select(val) {
            this.selectWidget = val
        },
        selectWidget: {
            handler(val) {
                this.$emit('update:select', val)
            },
            deep: true
        }
    },
    methods: {
        handleSelectWidget(index) {
            this.selectWidget = this.data.list[index]
        },
        mobanClick(el){
            this.$emit('mobanClick',el);
        }
    }
}
</script>
<style lang="scss">
    .widget-form-container .widget-form-list .moban-view{
        padding: 0;
        position: relative;
        .el-form-item__content{
            width: 100%;
            height: 100%;
        }
        .typeName{
            position: absolute;
            left: 10px;
            bottom: 10px;
            color: #666;
            font-size: 14px;
            z-index: 9;
        }
    }
</style>
